<div class="input-row">
    <span>文本内容：</span>
    <input id="text_value" value="" placeholder="标签的文本内容" />
</div>
<div id="font_setting_text">
    <div style="display: flex;flex-direction: row;">
        <div class="input-row">
            <span>字体样式：</span>
            <form id="${font_id}_type" class="layui-form" action="">
                <div class="">
                    <div>
                        <input type="checkbox" lay-filter="${font_id}_css" name="${font_id}_css" title="加粗">
                        <input type="checkbox" lay-filter="${font_id}_css" name="${font_id}_css" title="下划线">
                    </div>
                </div>
            </form>
        </div>
        <div class="input-row">
            <span>字体行高：</span>
            <input style="width: 50px;" id="${font_id}_lineheight" value="20" />
            <span style="margin-left:10px;">px</span>
        </div>
    </div>
    <div style="display: flex;flex-direction: row;">
        <div class="input-row" >
            <span>对齐方式：</span>
            <form id="${font_id}_select_align" class="layui-form" action="">
                <div>
                    <div>
                    <select lay-filter="align" name="city" lay-verify="required">
                        <option value="居左">居左</option>
                        <option value="居中">居中</option>
                        <option value="居右">居右</option>
                    </select>
                    </div>
                </div>
            </form>
        </div>

        <div class="input-row">
            <span>字体颜色：</span>
            <div id="${font_id}_color">
                <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change='change'>
                </el-color-picker>
            </div>
        
            <div id="${font_id}_color_show"></div>
        </div>
    </div>
    <div class="input-row">
        <span>字体大小：</span>
        <input style="width: 50px;" id="${font_id}_size" value="15" />
        <span style="margin-left:10px;">px</span>
    </div>
    <div class="input-row">
        <span>预设字体：</span>

        <form id="${font_id}_select_type" class="layui-form" action="">
            <div>
                <div>
                    <select lay-filter="type" >
                        <option value="无">无</option>
                        <option value="Serif 字体">Serif 字体</option>
                        <option value="Sans-serif 字体">Sans-serif 字体</option>
                        <option value="Monospace 字体">Monospace 字体</option>
                        <option value="Cursive 字体">Cursive 字体</option>
                        <option value="Fantasy 字体">Fantasy 字体</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    
    <div class="input-row">
        <span>超出部分：</span>
        <form id="${font_id}_select_word" class="layui-form" action="">
            <div>
                <div>
                    <select  lay-filter="word" >
                        <option value="默认">默认</option>
                        <option value="强制不换行">强制不换行</option>
                        <option value="自动换行">自动换行</option>
                        <option value="强制英文单词断行">强制英文单词断行</option>
                
                    </select>
                </div>
            </div>
        </form>

    </div>
</div>

layui.use('form', function () {
    var form = layui.form;
    form.on("checkbox(${font_id}_css)", function (data) {
        if (data.elem.checked && data.elem.title == "加粗") {
            console.log('加粗选中')
            window['${font_id}_blod'] = true
        }
        if (!data.elem.checked && data.elem.title == "加粗") {
            console.log('加粗取消')
            window['${font_id}_blod'] = false
        }
        if (data.elem.checked && data.elem.title == "下划线") {
            console.log('下划线选中')
            window['${font_id}_underline'] = true
        }
        if (!data.elem.checked && data.elem.title == "下划线") {
            console.log('下划线取消')
            window['${font_id}_underline'] = false
        }
    });
    form.on('select(align)', function(data){
        console.log(data);
        window['${font_id}_select_align'] =data.value;
    });
    form.on('select(type)', function(data){
        console.log(data);
        window['${font_id}_select_type'] =data.value;
    });
    form.on('select(word)', function(data){
        console.log(data);
        window['${font_id}_select_type'] =data.value;
    });
});